import {useEffect, useState} from "react";

function App() {

    /*
    * 组件初始化数据
    * */
    const [channels, setChannels] = useState([]);

    /*
    *
    * 发送请求获取数据的回调函数
    * */
    const fetchChannels = async () => {
        try {
            const result = await fetch("http://geek.itheima.net/v1_0/channels")
            const {data: {channels}} = await result.json();
            setChannels(channels)
        } catch (error) {
            console.log(error)
        }
    }

    /*
    *
    * 组件挂载执行
    * */
    useEffect(() => {
        fetchChannels()
    }, []);

    return (
        <div className="App">
            <ul>
                {/*map()方法映射li元素*/}
                {channels.map((channel, index) => <li key={index}>{channel.name}</li>)}
            </ul>
        </div>
    );
}

export default App;
